<template>
  <div class="yingmoo-register">
    <div class="header">
      <div class="header-main">
         <router-link :class="{'router-link-exact-active': $route.name=='ymIndex'}" to="/"><img src="../assets/ym-register/register-logo.png" /></router-link>
         <p>欢迎登录</p>
      </div>
    </div>
    <div class="main">
      <img src="../assets/ym-register/register-picture.png" class="register-picture" />
      <div class="register-model">
        <h3>账户登录</h3>
        <p><img v-if="warn_flag" src="../assets/ym-register/warn.png" />{{warning}}</p>
        <div class="register">
          <img src="../assets/ym-register/register-img.png" />
          <input v-model="user.name" type="text" placeholder="邮箱/用户名/已验证手机号" />
        </div>
        <div class="password">
          <img src="../assets/ym-register/password-img.png" />
          <input v-model="user.pwd" type="password" placeholder="密码" />
        </div>
        <div class="next">
          <input type="checkbox" id="next" />
          <label for="next">下次自动登录</label>
          <router-link tag="p" :class="{'router-link-exact-active': $route.name=='ymPassword'}" to="/ymPassword" class="p">忘记密码？</router-link>
        </div>
        <div class="btn_login" @click="test">
          立即登录
        </div>
        <router-link tag="p" :class="{'router-link-exact-active': $route.name=='ymEnroll'}" to="/ymEnroll" class="enroll">免费注册</router-link>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="w1200">
        <div class="copyright">
          <p>
            <span>Copyright @ 2012-2017</span>
            <span>北京鹰目网络科技有限公司</span>
            <span>京ICP备14044439号-1</span>
            <img src="../assets/ym-footer/icon-g.png" />
            <span>京公网安备 11010802020633号</span>
          </p>
          <p>
            <span>地址：北京市海淀区上地东路35号颐泉汇大厦D座5层</span>
            <span>热线：400 650 7893</span>
            <span>传真：010-62681689/8248335</span>
          </p>
        </div>
        <div class="safety clearfix">
            <a href="javascript:;"><img src="../assets/ym-footer/safe-360.png" /></a>
            <a href="javascript:;"><img src="../assets/ym-footer/safe-kexin.png" /></a>
            <a href="javascript:;"><img src="../assets/ym-footer/safe-aqlm.png" /></a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      requestAddr: this.GLOBAL.addr,
      user: {},
      warning: null,
      warn_flag: false
    };
  },
  methods: {
    test: function() {
      if (this.user.name == "" || this.user.name == null) {
        this.warning = "请输入用户名！";
        this.warn_flag = true;
        return;
      }
      if (this.user.pwd == "" || this.user.pwd == null) {
        this.warning = "密码不可为空！";
        this.warn_flag = true;
        return;
      }
      this.$http
        .post(this.requestAddr + "/Login/tologin", this.user, {
          emulateJSON: true
        })
        .then(
          res => {
            localStorage.setItem("user", JSON.stringify(res.data.user));
            localStorage.setItem("level", JSON.stringify(res.data.level));
            if (res.data.code == 0) {
              let redirect = decodeURIComponent(
                this.$route.query.redirect || "/"
              );
              this.$router.push({
                //你需要接受路由的参数再跳转
                path: redirect
              });
            } else {
              this.warn_flag = true;
              this.warning = res.data.msg;
            }
          },
          error => {
            console.log(error);
          }
        );
    }
  }
};
</script>

<style scoped lang="less">
.yingmoo-register {
  width: 100%;
  .header {
    width: 100%;
    height: 62px;
    background-color: #036eb7;
    .header-main {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: flex-start;
      p {
        color: #81a6de;
        line-height: 62px;
        font-size: 14px;
      }
      img {
        width: 187px;
        height: 50px;
        margin-top: 5px;
      }
    }
  }
  .main {
    width: 1000px;
    height: 679px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    padding-top: 100px;
    .register-picture {
      width: 501px;
      height: 389px;
    }
    .register-model {
      width: 322px;
      height: 375px;
      border: 1px solid #dddddd;
      margin-top: 10px;
      h3 {
        width: 280px;
        font-size: 23px;
        color: #f29600;
        text-align: center;
        margin: 0 auto;
        margin-top: 25px;
        line-height: 30px;
        border-bottom: 1px solid #dddddd;
      }
      p {
        color: #f29600;
        font-size: 12px;
        margin-left: 20px;
        line-height: 40px;
        margin-top: 6px;
      }
      .register {
        width: 280px;
        height: 36px;
        border: 1px solid #dddddd;
        margin-left: 20px;
        img {
          position: relative;
          top: 5px;
          left: 5px;
        }
        input {
          border: none;
          width: 245px;
          height: 33px;
          font-size: 14px;
          padding-left: 3px;
          margin-left: 5px;
          outline: none;
        }
      }
      .password {
        width: 280px;
        height: 36px;
        border: 1px solid #dddddd;
        margin-left: 20px;
        margin-top: 25px;
        img {
          position: relative;
          top: 5px;
          left: 5px;
        }
        input {
          border: none;
          width: 245px;
          height: 33px;
          font-size: 14px;
          padding-left: 3px;
          margin-left: 5px;
          outline: none;
        }
      }
      .next {
        margin-left: 20px;
        margin-top: 25px;
        label {
          font-size: 12px;
          color: #999999;
        }
        p {
          float: right;
          position: relative;
          top: -14px;
          right: 20px;
        }
        .p {
          cursor: pointer;
        }
      }
      .btn_login {
        width: 280px;
        height: 40px;
        background-color: #036eb7;
        color: white;
        font-size: 15px;
        line-height: 40px;
        margin-left: 20px;
        border-radius: 3px;
        margin-top: 25px;
        clear: both;
        text-align: center;
        cursor: pointer;
      }
      .enroll {
        width: 280px;
        text-align: right;
        color: #999999;
        font-size: 12px;
        line-height: 30px;
        cursor: pointer;
      }
    }
  }
  .footer-copyright {
    width: 100%;
    height: 108px;
    background: #1a1a1a;
    .w1200 {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .copyright {
      color: #fff;
      font-size: 14px;
      line-height: 30px;
      p {
        display: flex;
        align-items: center;
      }
      span {
        margin-right: 10px;
      }
      img {
        margin-right: 3px;
      }
    }
    .safety a {
      float: left;
      margin-left: 12px;
      img {
        display: block;
      }
    }
  }
}
</style>
